<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
   <!-- 引用字体图标 -->
   <link rel="stylesheet" href="./font/iconfont.css">
   
  </head>
  <style>
    li {
      list-style: none;
    }
    .width400 {
      width: 400px;
    }
    .fonts12 {
      font-size: 12px;
    }
    .fonts14 {
      font-size: 14px;
    }
    .po-a {
      position: absolute;
      bottom: 15%;
      left: 50%;
      transform: translateX(-50%);
    }
    .po-r {
      position: relative;
    }
    /* 第一个页面 */
    .one {
      height: 100vh;
      width: 100%;
    }
   
    .bgimg1 {
      background: url(./images/img1.jpg);
      background-repeat: no-repeat;
      width: 100%;
      /* height: 100%; */
      background-size: 100% 100%;
      height: 100vh;
    }
    .one .icon-tesila2 {
      font-size: 85px;
      position: absolute;
      top: -53px;
      left: 31px;
    }
    .one .icon-menu{
      font-size: 30px;
      position: absolute;
      top: 1px;
      left: 1px;
      background-color: #f00;
    }
    /* 公用样式 */
    /* .text-leftTop {
       margin-left: 30%; 
      padding-top: 2%; 
    } */
    .text-leftTop {
       margin-left: 426px; 
       padding-top: 20px; 
    }
  /* 公用样式 */
    .one .bgimg1 .bgimg1-text {
      display: flex;
      padding-top: 29%;
    padding-left: 30%;
    text-align: center;
    }
    .one .bgimg1 .bgimg1-text .text1{
      width: 15%;
    }
    .one .bgimg1 .bgimg1-text .text2{
      width: 15%;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
    .one .bgimg1 .bgimg1-text .text3{
      width: 15%;
    }
    .one .bgimg1 .bgimg1-text .text4{
      width: 15%;
      padding-top: 1%;
    }
    /* 第二个页面 */
    .tow {
      width: 100%;
      height: 100vh;
    }
    .tow .bgimg2 {
      background: url(./images/img2.jpg);
      background-repeat: no-repeat;
      width: 100%;
      height: 720px;
      background-size: 100% 100%;
    }
    .tow .bgimg2-textT{
      display: flex;
      /* padding-top: 28%;
      padding-left: 30%; */
      padding-top: 600px;
    padding-left: 620px;
    }
    .tow .bgimg2-textT .text1{
      width: 15%;
      background-color: #f00;
    }
    .tow .bgimg2-textT .text2{
      width: 15%;
    }
    .tow .bgimg2-textT .text3{
      width: 15%;
    }
    
    .tow .icon-chongdianfang {
      position: absolute;
      top: -38px;
      left: 14px;
      font-size: 25px;
    }
    .tow .icon-taiyangnengdianchi {
      position: absolute;
      top: -38px;
      left: 48px;
      font-size: 25px;
    }
    .tow .icon-xunhuanliyong {
      position: absolute;
      top: -38px;
      left: 14px;
      font-size: 25px;
    }
    .tow .bgimg2-textB{
      width: 100%;
      height: 200px;
      display: flex;
    }

    /* 第三个页面 */
    .three {
      width: 100%;
      height: 100vh;
    }
    .three .three-top {
      height: 25%;
      height: 230px;
      background-color: #000;
    }
    .three .three-center {
      height: 520px;
      background-color: #fff;
    }
    .three .three-center .bgimg3 {
      background: url(./images/333.png);
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
    }
    .three .three-bottom {
      height: 170px;
      background-color: #000;
    }
    .three .three-top .three-text {
      display: flex;
    }
    .three .three-text .text-r {
      margin-left: 126px;
    }
    .three .three-bottom {
      text-align: center;
    }
    .three-bottom .bottom-btn {
      padding-top: 40px;
    }
    .three-bottom .bottom-btn button {
      width: 200px;
      height: 100px;
      margin: 0px 10px;
    }

    /* 第四个页面 */
    .four {
      width: 100%;
      height: 100vh;
    }
    .four .bgimg4 {
      background: url(./images/444.jpg);
      background-repeat: no-repeat;
      width: 100%;
      height: 700px;
      background-size: 100% 100%;
    }
    .four .bgimg4bottom {
      width: 100%;
      height: 220px;
     background-color: #fff;
    }
    /* 第五个页面 */
    .five {
      width: 100%;
      height: 100vh;
      display: flex;
    }
    .five .fiveleft {
      height: 920px;
      width: 22%;
    }
    .five .bgimg5 {
      background: url(./images/img5.jpg);
      background-repeat: no-repeat;
      width: 78%;
      height: 920px;
      background-size: 100% 100%;
    }
    .five .fiveleft-text {
      padding-top: 20px;
      padding-left: 15px;
    }
    .five .fiveleft-text button {
      margin-top: 600px;
    }

    .five .bgimg5-text {
      display: flex;
      padding-top: 720px;
      padding-left: 270px;
    }
    .five .bgimg5-text .tex1 {
      width: 25%;
      position: relative;
    }
    .five .bgimg5-text .tex2 {
      width: 25%;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
    .five .bgimg5-text .tex2 p {
      padding-left: 48px;
    }
    .five .bgimg5-text .tex3 {
      width: 25%;
    }
    .five .bgimg5-text .tex3 p {
      padding-left: 48px;
    }

    .fonts24 {
      font-size: 24px;
    }
    /* 第六个页面 */
    .six {
      width: 100%;
      height: 100vh;
      background-color: #000;
      display: flex;
    }
    .six .bgimg6 {
      background: url(./images/img6.jpg);
      background-repeat: no-repeat;
      width: 50%;
      height: 820px;
      /* padding-top: 50px; */
      background-size: 100% 120%;
    }
    .six .text2 .text2-txt {
      display: flex;
      padding-top: 30px;
    }
    .six .text2 ul:nth-child(1) {
      padding-left: 0;
    }
    .six .text2 ul li p {
      margin: 0;
    }
    .six .six-text {
      margin-top: 200px;
    }

    /* 第七个页面 */
    .seven {
      width: 100%;
      height: 100vh;
      background-color: #000;
    }
    .seven .seven-text{
      text-align: center;
    }
    .seven .seven-text .seven-textT{
      padding-top: 200px;
    }
    .seven .seven-text .seven-textB{
      padding-top: 520px;

    }
    .seven .seven-text .seven-textB p{
      margin: 0;
    }
  </style>

  <body>
    <!-- 第一个页面 -->
    <div class="one">
      <div class="bgimg1 ">
        <div class="row text-white fonts14">
          <div class="col mt-3"><span class="iconfont icon-tesila2"></span></div>
          <div class="col mt-3">
            <span class="m-2">MODEL S</span>
            <span class="m-2">MODEL 3</span>
            <span class="m-2">MODEL X</span>
            <span class="m-2">MODEL Y</span>
            <span class="m-2">CYBERTRUCK</span>
            <span class="m-2">POWERWALL</span>
          </div>
          <div class="col mt-3 text-right po-r">
            <span class="m-2">在线商店</span>
            <span class="m-2">登录</span>
            <span class="iconfont icon-menu"></span>
          </div>
        </div>
        <h1 class="text-center text-white mt-5 pt-5">Powerwall</h1>

        <div class="bgimg1-text fonts12 text-white ">
          <div class="text1">
            <span class="iconfont icon-chongdianqi fonts24"></span>
            <p>存储能量</p>
          </div>
          <div class="text2">
            <span class="fonts24 ">24/7</span>
            <p>备用电能</p>
          </div>
          <div class="text3">
            <span class="iconfont icon-chongdianfang fonts24 "></span>
            <p>为家庭供电</p>

          </div>
          <div class="text4">
            <button type="button" class="btn btn-outline-light rounded-pill px-5">获取最新资讯</button>
          </div>
        </div>

       
      </div>
    </div>

    <!-- 第二个页面 -->
    <div class="tow">
      <div class="bgimg2 ">     
        <div class="bgimg2-textT fonts12 text-white ">
          <div class="text1">
            <span class="iconfont icon-chongdianqi fonts24"></span>
            <p>断电时，利用存储的能量<br>为家庭供电</p>
          </div>
          <div class="text2">
            <span class="iconfont icon-taiyangnengdianchi

            "></span>
            <p>配合太阳能使用时<br>可实现清洁能源充电</p>
          </div>
          <div class="text3">
            <span class="iconfont icon-xunhuanliyong"></span>
            <p>保障家电<br>不间断运行</p>
          </div>        
        </div>
      </div>
      <div class="bgimg2-textB text-leftTop">
        <div class="text-l">
          <p>安全</p>
          <h4>备用电能</h4>
          <button type="button" class="btn btn-outline-dark rounded-pill px-4">获取最新资讯</button>
        </div>
        <div class="text-r fonts14 ">Powerwall 是可以储能，检测断电情况，并在停电时为住宅供电的电池。与发电机不同<br />Powerwall 无需保养、不耗油也不会产生噪音，让您家灯常亮。搭配太阳能，利<br />用阳光充电，可为家电连续供电数天。</div>
      </div>
    </div>

    <!-- 第三个页面 -->
    <div class="three text-white">
      <div class="three-top">
        <div class="three-text text-leftTop">
          <div class="text-l">
            <p>能源自给</p>
            <h4>全方位能源供应</h4>
            <button type="button" class="btn btn-outline-light rounded-pill px-4">获取最新资讯</button>
          </div>

          <div class="text-r fonts14">
            Powerwall 通过存储太阳能增强系统用电的独立性，在夜晚您也可以享用自己家发电<br />的清洁能源。单独使用 Powerwall ，或将其与其他 Tesla 产品结合使用，可节省开<br />
            支、减少碳排放并让您从容应对断电情况。
          </div>
        </div>
      </div>

      <div class="three-center">
        <div class="bgimg3"></div>
      </div>

      <div class="three-bottom">
        <div class="bottom-btn">
          <button type="button" class="btn btn-outline-light fonts12 text-left">可存储来自电网或光伏发电<br />系统的电力</button>
          <button type="button" class="btn btn-outline-light fonts12 text-left">随时使用存储的能量为家庭供电</button>
          <button type="button" class="btn btn-outline-light fonts12 text-left">在夜间</button>
          <button type="button" class="btn btn-outline-light fonts12 text-left">太阳升起或电网重新供电时，开启充电模式</button>
        </div>
      </div>
    </div>

    <!-- 第四个页面 -->
    <div class="four">
      <div class="bgimg4"></div>
      <div class="bgimg4bottom">
        <div class="bgimg-text text-leftTop">
          <div class="text-l">
            <p>安全</p>
            <h4>备用电能</h4>
            <button type="button" class="btn btn-outline-dark rounded-pill px-4">获取最新资讯</button>
          </div>
          <div class="text-r fonts14">Powerwall 是可以储能，检测断电情况，并在停电时为住宅供电的电池。与发电机不同<br />Powerwall 无需保养、不耗油也不会产生噪音，让您家灯常亮。搭配太阳能，利<br />用阳光充电，可为家电连续供电数天。</div>
        </div>
      </div>
    </div>

    <!-- 第五个页面 -->
    <div class="five">
      <div class="fiveleft">
        <div class="fiveleft-text">
          <p class="mb-0">设计</p>
          <h4>时尚且紧凑</h4>
          <p class="fonts14">Powerwall 易于安装、设计简约，完美契合多种住宅风<br />格。紧凑的一体化设计，可实现室内或室外空间多样化安<br />装。</p>
          <button type="button" class="btn btn-outline-dark rounded-pill px-4">获取最新资讯</button>
        </div>
      </div>
      <div class="bgimg5">
        <div class="bgimg5-text fonts12 text-white">
          <div class="tex1">
            <span class="iconfont icon-dianji fonts24"></span>
            <p>对儿童和宠物友好<br />没有暴露在外的电线或热排风口</p>
          </div>
          <div class="tex2">
            <span class="fonts24 pl-5">10x</span>
            <p>可合用多达 10 个 Powerwall <br />满足您的能源需求</p>
          </div>
          <div class="tex3">
            <span class="iconfont icon-anquan fonts24 pl-5"></span>
            <p>防水而又坚固耐用<br />轻松应对各种天气状况口</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 第六个页面 -->
    <div class="six text-white">
      <div class="bgimg6"></div>
      <div class="six-text">
        <div class="text2">
          <h2>Powerwall 规格</h2>
          <div class="text2-txt fonts14">
            <ul>
              <li>
                <p><strong>能源容量</strong></p>
                <p>13.5 kWh</p>
                <p>100% 放电深度</p>
                <p>90% 充放电循环效率</p>
              </li>
              <li>
                <p><strong>功率</strong></p>
                <p>7kW 峰值功率 / 5kW 连续功率</p>
                <p>备用电源无缝转换</p>
                <p>纯正弦波输出</p>
              </li>
              <li>
                <p><strong>尺寸和重量</strong></p>
                <p>长x宽x高</p>
                <p>45.3 英寸 x 29.6 英寸 x 5.75</p>
                <p>英寸</p>
                <p>1150 毫米 x 753 毫米 x 147</p>
                <p>毫米</p>
                <p>251.3 磅/ 114 千克</p>
              </li>
            </ul>
            <ul>
              <li>
                <p><strong>安装</strong></p>
                <p>地面或墙壁</p>
                <p>室内或室外</p>
                <p>最多 10 台 Powerwall</p>
                <p>-4°F 至 122°F / -20°C 至</p>
                <p>50°C</p>
                <p>防水防尘等级达到 IP67</p>
              </li>
              <li>
                <p><strong>认证</strong></p>
                <p>符合美国和国际安全标准</p>
                <p>符合美国和国际 EMI 标准</p>
              </li>
              <li>
                <p><strong>质量保证</strong></p>
                <p>10 年</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 第七个页面 -->
    <div class="seven">
      <div class="seven-text text-white">
        <div class="seven-textT">
          <h2>保障家庭电力供应</h1>
          <p class="fonts12 pt-2">即订阅 Powerwall 最新消息</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-5 fonts12">获取最新资讯</button>
        </div>
        <div class="seven-textB fonts12">
          <p>Tesla © 2020 &nbsp;&nbsp;&nbsp;沪ICP备14038430号-1&nbsp;&nbsp; &nbsp;隐私和法律&nbsp;&nbsp;&nbsp; 联系我们 &nbsp;&nbsp;&nbsp;工作机会&nbsp;&nbsp;&nbsp; 最新消息</p>
        </div>
      </div>
    </div>
  </body>
</html>
